<template>
  <div class="freight">
    <div class="main">
      <div class="header">全局运费设置</div>

      <div class="full">
        <div class="left">商品下单满</div>
        <div class="center">
          <el-input
            v-model="price"
            placeholder="请输入内容"
            clearable
          ></el-input>
        </div>
        <div class="right">包邮;</div>
        <div class="right1" @click="saveFreight">保存</div>
      </div>

      <div class="lint"></div>

      <div class="table">
        <div class="search">
          <el-input
            clearable
            v-model="templateValue"
            placeholder="请输入模版名称"
            style="width: 280px; height: 40px"
          ></el-input>

          <div class="button" @click="searchHit">搜索</div>
          <div
            class="button1"
            @click="replacementHit"
            style="background: #999999"
          >
            重置
          </div>
          <div class="button1" @click="addHit" style="background: #ff8d1a">
            添加运费模板
          </div>
        </div>

        <div class="lint"></div>

        <el-table
          v-loading="loading"
          :data="tableData"
          border
          :header-cell-style="{
            color: '#333333',
            backgroundColor: '#f3f3f3',
          }"
        >
          <el-table-column prop="updateTime" label="更新时间">
          </el-table-column>
          <el-table-column prop="goodPostageName" label="城市名称">
          </el-table-column>
          <el-table-column prop="" label="运费模式" align="center">
            <template slot-scope="scope">
              {{
                scope.row.isFree == 1
                  ? "包邮"
                  : scope.row.isFree == 0
                  ? "自定义运费"
                  : ""
              }}
              -
              {{
                scope.row.billingType == 0
                  ? "按件数"
                  : scope.row.billingType == 1
                  ? "按重量"
                  : ""
              }}
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="300">
            <template slot-scope="scope">
              <div class="operation">
                <div class="list" @click.prevent="editHit(1, scope.row)">
                  编辑
                </div>

                <div class="list" @click.prevent="deleteHit(scope.row)">
                  删除
                </div>

                 <div class="list" @click.prevent="detailsHit(scope.row)">
                  查看详情
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="tableDataTotal"
            :current-page="page"
          >
          </el-pagination>
        </div>
      </div>

      <!--删除弹出框-->
      <div class="popup">
        <el-dialog
          title="删除"
          :visible.sync="deleteVisible"
          :before-close="deleteClose"
        >
          <div class="delete-title">是否确认删除？</div>
          <div class="delete-attachment">
            <div class="list" @click="deleteClose">取消</div>
            <div class="list" @click="deleteConfirm">确定</div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { savePostagegoodList, savePostagegoodListIdDelete } from "@/api/save";

import { commonsetting, commonsettingAdd } from "@/api/common";

export default {
  data() {
    return {
      settingObj: {},
      price: "",
      templateValue: "",
      //---------
      page: 1,
      limit: 10,
      tableData: [],
      tableDataTotal: 0,
      addRoaid: 0,
      loading: false,
      commonObj: {},
      //----------------
      deleteVisible: false,
    };
  },
  created() {
    this.loading = true;
    this.savePostagegoodListMet();

    this.commonsettingMet();
  },
  methods: {
    commonsettingMet() {
      let params = {};

      commonsetting(params).then((res) => {
        if (res.errorCode == null) {
          this.settingObj = res.resultData;
          this.price = Number(res.resultData.freePrice / 100).toFixed(2);
        }
      });
    },

    saveFreight() {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      let params = {
        key: "freePrice",
        value: Number(this.price * 100),
      };

      commonsettingAdd(params).then((res) => {
        if (res.errorCode == null) {
          this.$message.success("运费设置成功！");
          this.loading = true;
          this.commonsettingMet();
          this.savePostagegoodListMet();
        }
      });
    },

    //------------
    searchHit() {
      this.loading = true;
      this.page = 1;
      this.savePostagegoodListMet();
    },
    replacementHit() {
      this.templateValue = "";

      this.loading = true;
      this.page = 1;
      this.savePostagegoodListMet();
    },
    savePostagegoodListMet() {
      let params = {
        goodPostageName: this.templateValue,
        pageSize: this.limit,
        pageNo: this.page,
      };

      savePostagegoodList(params).then((res) => {
        if (res.errorCode == null) {
          this.tableData = res.resultData.goodPostageList;
          this.tableDataTotal = res.resultData.totalNum;
          this.loading = false;
        }
      });
    },
    //--------------------
    addHit() {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.$router.push({
        path: "/save/operation/operation-freight-add",
        query: {
          soucre: 0,
        },
      });
    },
    editHit(index, item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.$router.push({
        path: "/save/operation/operation-freight-add",
        query: {
          soucre: 0,
          id: item.goodPostageId,
        },
      });
    },
    detailsHit(item) {
       if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.$router.push({
        path: "/save/operation/operation-freight-add",
        query: {
          soucre: 10,
          id: item.goodPostageId,
        },
      });
    },
    deleteHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.commonObj = item;
      this.deleteVisible = true;
    },
    deleteClose() {
      this.deleteVisible = false;
    },
    deleteConfirm() {
      let params = this.commonObj.goodPostageId;

      savePostagegoodListIdDelete(params).then((res) => {
        if (res.errorCode == null) {
          this.$message.success("删除成功！");
          this.loading = true;
          this.savePostagegoodListMet();
          this.deleteVisible = false;
        }
      });
    },
    //-------------------------------------------------
    handleSizeChange(val) {
      this.limit = val;
      this.loading = true;
      this.savePostagegoodListMet();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loading = true;
      this.savePostagegoodListMet();
    },
  },
};
</script>

<style lang="less" scope>
@import url("@/assets/css/common.less");
@import url("@/assets/css/delete.less");

.freight {
  .main {
    .header {
      margin-top: 10px;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: bold;
    }

    .full {
      margin-top: 20px;
      display: flex;
      align-items: center;
      height: 40px;

      .left {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #666666;
      }

      .center {
        margin: 0 10px;
        height: 40px;
      }

      .right {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #666666;
      }

      .right1 {
        padding: 4px 25px;
        box-sizing: border-box;
        border-radius: 5px;
        background: #2a82e4;
        color: #fff;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        cursor: pointer;
        margin-left: 40px;
      }
    }

    .lint {
      width: 100%;
      height: 1px;
      background: #e5e5e5;
      margin: 20px 0;
    }

    .table {
      .search {
        display: flex;
        align-items: center;

        .button {
          margin-left: 20px;
          padding: 9px 20px;
          box-sizing: border-box;
          border-radius: 5px;
          background: #2a82e4;
          font-size: 14px;
          color: #fff;
          margin-left: 20px;
          cursor: pointer;
        }

        .button1 {
          height: 38px;
          margin-left: 20px;
          padding: 9px 20px;
          box-sizing: border-box;
          border-radius: 5px;
          background: #2a82e4;
          font-size: 14px;
          color: #fff;
          margin-left: 20px;
          cursor: pointer;
        }
      }
    }

    .popup {
      .el-dialog {
        width: 400px;
        text-align: center;
        margin-top: 35vh !important;
        border-radius: 10px;
      }

      .el-dialog__footer {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .el-button + .el-button {
        margin-left: 30px;
      }

      .el-dialog__title {
        font-size: 18px;
      }

      .el-dialog__header {
        border-bottom: 1px solid #ccc;
      }

      .delete-title {
        font-size: 16px;
        line-height: 30px;

        span {
          color: red;
        }
      }

      .delete-attachment {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;

        .list {
          background: #3da8f5;
          color: #fff;
          font-size: 14px;
          margin-right: 50px;
          border-radius: 5px;
          width: 80px;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        .list:first-child {
          background: #808080;
        }

        .list:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>